<template>
	<div class="join-con">
		<div class="bannerbox">
			<!-- <img class="backimg" src="../../assets/images/newimg/z12@2x.png" alt="" />-->
		</div>
		<div class="full">
			<img src="../../assets/images/newimg/zu72@2x.png" alt="">
		</div>

		<div class="form-con">
			<form action="">
				<ul class="biao box_siz">
					<li>
						<img src="../../assets/images/newimg/shmcjs@2x.png" alt="">
            <input type="text" v-model="formInfo.businessName" placeholder="请输入商户名称">
					</li>
					<li>
						<img src="../../assets/images/newimg/dlkbjs@2x.png" alt="">
            <input type="text" v-model="formInfo.people" placeholder="请输入联系人">
					</li>
					<li>
						<img src="../../assets/images/newimg/dhjs(2)@2x.png" alt="">
            <input type="text" v-model="formInfo.phone" placeholder="请输入手机号">
					</li>
					<li>
						<img src="../../assets/images/newimg/dzjs(1)@2x.png" alt="">
            <input type="text" v-model="formInfo.address" placeholder="请输入地址">
					</li>
				</ul>
				<div style="text-align:center">
					<button class="btn" @click="subInfo"></button>
				</div>
			</form>
		</div>

	</div>
</template>

<script>
  export default {
    data () {
      return {
        formInfo: {
          businessName: '',
          people: '',
          phone: '',
          address: ''
        }
      }
    },
    methods: {
      subInfo () {
        var that = this
        var info = this.formInfo
        if (info.businessName === '') {
          alert('请输入商户名称')
        } else if (info.people === '') {
          alert('请输入联系人')
        } else if (info.phone === '') {
          alert('请输入手机号')
        } else {
          var data = that.formInfo
          this.$http({
            method: 'get',
            url: 'http://api.wangjianxin.top/insertBusinessApply?businessName=' + data.businessName + '&people=' + data.people + '&phone=' + data.phone + '&address=' + data.address
            // data: that.formInfo
          }).then(function (res) {
            // that.shareData = res
            console.log(res)
            if (res.status === 200) {
              alert('提交成功')
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
	.backimg {
		width: 7.5rem;
		height: 100vh;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: -99;
	}
	/* 客满多 */

	.full {
		text-align: center;
		margin: 20% 0 10%;
	}

	.full img {
		width: 80%;
	}
	/* form表单 */

	.form-con {
		width: 80%;
		width: 7.08rem;
		height: 7.19rem;
		margin: 0 auto;
		/*border-radius: .2rem;*/
		/*background: rgba(204,204,204,.1);*/
		/*border:.01rem solid #F4C08E;*/
	}

	.biao {
		padding: 0.3rem;
	}

	.biao li {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: .3rem;
		/*margin-left: 0.6rem;*/
		position: relative;
	}

	.biao li img {
		width: .37rem;
		position: absolute;
		top: 0.5rem;
		left: 0.5rem;
	}

	.biao li input {
		width: 5.57rem;
		height: .7rem;
		background: transparent;
		border: 1px solid rgba(255, 147, 42, 1);
		border-radius: 0.35rem;
		margin-left: .3rem;
		font-size: .24rem;
		color: #818181;
		padding-left: .8rem;
	}
	/* 提交按钮 */

	.btn {
		width: 3.65rem;
		height: 1.1rem;
		border: 0;
		background:url(../../assets/images/newimg/zujs71@2x.png) no-repeat center;
		background-size: cover;
		border-radius: 0.06rem;
		font-size: 0.30rem;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.8);
		text-align: center;
		line-height: 0.82rem;
	}
</style>
